<template>
  <div ref="chartRef" :style="{ height, width }" class="map-box" />
</template>
<script lang="ts" setup>
import { PropType, ref, Ref, onMounted } from "vue";
// import { useECharts } from "@/hooks/web/useECharts";
import { useECharts } from "@pureadmin/utils";

import { mapData } from "./data";
import { registerMap } from "echarts";

defineProps({
  width: {
    type: String as PropType<string>,
    default: "100%"
  },
  height: {
    type: String as PropType<string>,
    default: "calc(100vh - 78px)"
  }
});

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

const assetFengbu = [
  {
    name: "榆林市",
    value: 490
  },
  {
    name: "西安市",
    value: 862
  },
  {
    name: "延安市",
    value: 589
  },
  {
    name: "渭南市",
    value: 178
  },
  {
    name: "铜川市",
    value: 400
  },
  {
    name: "宝鸡市",
    value: 453
  },
  {
    name: "商洛市",
    value: 231
  },
  {
    name: "汉中市",
    value: 314
  },
  {
    name: "安康市",
    value: 165
  },
  {
    name: "咸阳市",
    value: 652
  }
];

onMounted(async () => {
  // const json = (await (await import("./china.json")).default) as any;
  // registerMap("china", json);

  const json = (await (await import("./shanxi.json")).default) as any;
  registerMap("shanxi", json);

  setOptions({
    title: {
      text: "资产区域分布", // 设置标题的文本
      left: 10, // 设置标题的位置
      top: 10,
      textStyle: {
        color: "#459BE8" // 设置标题的颜色
      }
    },
    visualMap: [
      {
        min: 0,
        max: 1000,
        left: "left",
        top: "bottom",
        text: ["高", "低"],
        calculable: false,
        orient: "horizontal",
        inRange: {
          color: ["#e0ffff", "#006edd"],
          symbolSize: [30, 100]
        }
      }
    ],
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0, 0, 0, .6)",
      textStyle: {
        color: "#fff",
        fontSize: 12
      }
    },
    series: [
      {
        name: "资产数值",
        type: "map",
        // map: "china", //地图名称，应该不是symbol类型
        map: "shanxi", //地图名称，应该不是symbol类型
        label: {
          show: true,
          color: "rgb(249, 249, 249)",
          fontSize: 10
        },
        itemStyle: {
          areaColor: "#2f82ce",
          borderColor: "#0DAAC1"
        },
        //data数据name要和地图上的name一致?
        // data: mapData
        data: assetFengbu
      }
    ]
  });
});
</script>
<style scoped lang="scss">
.map-box {
  border-radius: 5px;
  background-color: rgb(239, 250, 255);
  // background-color: rgb(255, 245, 244);
}
</style>
